<template>
  <div class="con1">
    <img class="fanhui"
         src="@/assets/img/right3.png"
         alt=""
         @click="fanhui" />
    <div class="title">欢迎注册中铁企业用户</div>
    <div class="ipo">
      <img src="@/assets/img/login/qiye.png"
           alt="" />
      <input type="text"
             placeholder="请输入企业名称"
             maxlength="25"
             v-model="name" />
    </div>
    <div class="ipo">
      <img src="@/assets/img/login/ipo.png"
           alt="" />
      <input type="text"
             placeholder="请输入手机号"
             maxlength="11"
             v-model="phone" />
    </div>
    <div class="yanzheng">
      <input type="text"
             placeholder="请输入验证码"
             maxlength="6"
             v-model="code" />
      <div class="daoji"
           @click="getCode">
        <span v-show="show">获取短信验证码</span>
        <span v-show="!show"
              class="count">{{ count }} s</span>
      </div>
    </div>
    <div class="ipo">
      <img src="@/assets/img/login/bass.png"
           alt="" />
      <input type="password"
             placeholder="请输入6-20位密码"
             maxlength="20"
             v-model="pass" />
    </div>
    <div class="ipo">
      <img src="@/assets/img/login/bass.png"
           alt="" />
      <input type="password"
             placeholder="请再次输入密码"
             maxlength="20"
             v-model="repass" />
    </div>
    <div class="ipo">
      <img src="@/assets/img/login/wangzi.png"
           alt="" />
      <input type="text"
             placeholder="请输入网址"
             maxlength="50"
             v-model="web" />
    </div>
    <div class="ipo">
      <img src="@/assets/img/login/dizhi.png"
           alt="" />
      <input type="text"
             placeholder="请输入公司地址"
             maxlength="40"
             v-model="address" />
    </div>
    <div class="a">
      <el-upload class="avatar-uploader b"
                 :action="baseUrl+'/api/common/upload'"
                 :show-file-list="false"
                 :on-success="uploadSuccess"
                 :before-upload="beforeUpload"
                 :accept="'image/*'">
        <img v-if="imgUrl"
             :src="imgUrl"
             class="avatar addimg" />
        <img v-else
             class="addimg"
             src="@/assets/img/login/add.png"
             alt="" />
      </el-upload>
    </div>

    <div class="xieyi">
      <label for="ab2"
             class="lab">
        <input id="ab2"
               type="checkbox"
               v-model="dis" />
        我已阅读并同意
      </label>
      <!-- <span>《中铁用户协议》</span>和<span>《隐私政策声明》</span> -->
      <span @click.stop="xieyi(0)">《中铁用户协议》</span>和<span @click.stop="xieyi(1)">《隐私政策声明》</span>
    </div>
    <div class="denglu"
         @click="denglu">注册</div>
    <el-dialog :title="name1"
               :visible.sync="dialog">
      <div class="dialog"
           v-html="html"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dis: false,
      show: true,
      count: "", //倒计时时间
      timer: null, //倒计时事件
      dialogImageUrl: "",
      dialogVisible: false,
      // imageList: [],
      name: '',
      phone: '',
      code: '',
      pass: '',
      repass: '',
      web: '',
      address: '',
      baseUrl: '',
      imgUrl: '',
      dialog: false,
      name1: '',
      html: '',
    };
  },
  mounted() {
    this.baseUrl = this.$baseUrl
  },
  methods: {
    xieyi(num) {
      this.$postRequest('/api/cms/getTreaty', {
        status: num
      }).then(res => {
        num == 0 ? this.name = '《中铁用户协议》' : this.name = '《隐私政策声明》'
        this.html = res.data.content
        this.dialog = true
      })
    },
    fanhui() {
      this.$router.go(-1); //返回上一层
    },
    //倒计时
    getCode() {
      if (!this.show) return;
      const TIME_COUNT = 60;
      if (!this.timer) {
        if (this.phone == '') {
          this.$message.error('请输入手机号')
        } else if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)) {
          this.$message.error('手机号格式错误')
        } else {
          this.$postRequest('/api/member/getCode', {
            phone: this.phone
          }).then(res => {
          })
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
    // 文件上传前的钩子，数为上传的文件
    beforeUpload(file) {
      // 判断图片是否大于2M
      const isLt2M = file.size / 1024 / 1024 < 2;
      // const fileType = file.name.substring(file.name.lastIndexOf('.')+1)
      // 判断图片的类型
      const isJpg =
        file.type == "image/jpeg" ||
        file.type == "image/jpg" ||
        file.type == "image/png" ||
        file.type == "image/gif";
      if (!isJpg) {
        this.$message.error("只能上传jpg, jpeg, png, gif格式的图片！");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
    },
    // 上传图片超出数量限制时的钩子
    exceed(files, fileList) {
      this.$message.error("最多上传1张图片哦！");
    },
    // 上传成功时的钩子
    uploadSuccess(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.imgUrl = res.data;
    },
    denglu() {
      if (this.name == '') {
        this.$message.error('请输入企业名称')
      } else if (this.phone == '' || !/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.phone)) {
        this.$message.error('手机号错误')
      } else if (this.code == '' || !/^[0-9]{4,6}$/.test(this.code)) {
        this.$message.error('验证码错误')
      } else if (this.pass == '' || !/^[a-zA-Z0-9_-`~!@#$%^&*]{6,20}$/.test(this.pass)) {
        this.$message.error('密码错误')
      } else if (this.pass != this.repass) {
        this.$message.error('两次密码不一致')
      } else if (this.web == '') {
        this.$message.error('请输入企业网址')
      } else if (this.address == '') {
        this.$message.error('请输入企业地址')
      } else if (this.imgUrl == '') {
        this.$message.error('请上传企业资质')
      } else if (!this.dis) {
        this.$message.error('请先勾选同意用户协议和隐私声明')
      } else {
        this.$postRequest('/api/user/companyUser/register', {
          phone: this.phone,
          password: this.pass,
          name: this.name,
          website: this.web,
          address: this.address,
          imgurl: this.imgUrl,
          code: this.code
        }).then(res => {
          this.$message.success('注册成功')
          this.$router.push({ name: 'loginindex' })
        })
      }
    }
  }
};
</script>
<style scoped lang="scss">
.con1 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  overflow-y: scroll;
  .fanhui {
    flex-shrink: 0;
    width: 18px;
    height: 24px;
    margin-top: 40px;
    margin-left: 40px;
    transform: rotate(180deg);
    align-self: flex-start;
    padding: 5px;
    cursor: pointer;
  }
  .title {
    flex-shrink: 0;
    margin-top: 55px;
    width: 70%;
    font-size: 32px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
    margin-bottom: 50px;
  }
  .ipo {
    flex-shrink: 0;
    height: 105px;
    width: 70%;
    display: flex;
    align-items: center;
    position: relative;
    img {
      width: 25px;
      height: 25px;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      left: 20px;
    }
    input {
      width: 100%;
      height: 100%;
      border: none;
      border-bottom: 1px solid #e5e5e5;
      outline: none;
      padding-left: 76px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #1b1b1b;
      box-sizing: border-box;
      &:focus {
        border: none;
        border-bottom: 1px solid #1a69e0;
      }
      &::-webkit-input-placeholder {
        color: #bfbfbf;
      }
    }
  }
  .yanzheng {
    flex-shrink: 0;
    height: 105px;
    width: 70%;
    display: flex;
    align-items: center;
    position: relative;
    input {
      width: 100%;
      height: 100%;
      border: none;
      border-bottom: 1px solid #e5e5e5;
      outline: none;
      padding-left: 20px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #1b1b1b;
      box-sizing: border-box;
      &:focus {
        border: none;
        border-bottom: 1px solid #1a69e0;
      }
      &::-webkit-input-placeholder {
        color: #bfbfbf;
      }
    }
    .daoji {
      width: 200px;
      height: 50px;
      background: rgba(26, 105, 224, 0.05);
      border: 1px solid #1a69e0;
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translate(0, -50%);
      text-align: center;
      line-height: 50px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #1a69e0;
      cursor: pointer;
    }
  }
  .xieyi {
    flex-shrink: 0;
    width: 70%;
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 28px;
    span {
      color: #1a69e0;
      cursor: pointer;
    }
    .lab {
      display: flex;
      align-items: center;

      input[type='checkbox'] {
        width: 20px;
        height: 20px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        line-height: 18px;
        margin-right: 10px;
        position: relative;
        margin-right: 10px;
      }
      input[type='checkbox']::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
      }
      input[type='checkbox']:checked::before {
        content: '\2713';
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: 1px solid #7d7d7d;
        border-radius: 4px;
        color: #7d7d7d;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
  .denglu {
    flex-shrink: 0;
    margin-top: 30px;
    width: 400px;
    height: 60px;
    background: #1a69e0;
    border-radius: 2px;
    line-height: 60px;
    text-align: center;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 30px;
  }
  .a {
    width: 70%;
    margin-top: 20px;
    .addimg {
      width: 148px;
      height: 148px;
      border-radius: 6px;
    }
    .b /deep/ .el-upload--picture-card {
      background-color: #fbfdff;
      border-radius: 6px;
      box-sizing: border-box;
      width: 148px;
      height: 148px;
      border: none;
    }
  }
}
</style>